<template>
	<view>
		<!-- 收入比例 -->
		<view class="sales_double_income">
			<view class="sales_double_income-title">河道名:</view>
			<input class="sales_double_income-input" placeholder="请输入河道名" />
			<!-- <view class="sales_double_income-unit">%</view> -->
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">河道类型:</view>
			<radio-group name="gender" class="sales_double_income-radio">
				<label v-for="(item,index) in radioItems" :key="index">
					<radio :id="item.name" :value="item.name" /><text style="margin-right:16upx;">{{item.value}}</text>
				</label>
			</radio-group>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">河道长度:</view>
			<input type="number" class="sales_double_income-input" placeholder="请输入河道长度" />
			<view class="sales_double_income-unit">m</view>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">河道面积:</view>
			<input type="number" class="sales_double_income-input" placeholder="请输入河道类面积" />
			<view class="sales_double_income-unit">㎡</view>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">发源地:</view>
			<input class="sales_double_income-input" placeholder="请输入河道发源地" />
			<!-- <view class="sales_double_income-unit">%</view> -->
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">河道级别:</view>
			<picker class="sales_double_income-radio" @change="bindPickerChange" :value="index" :range="levelItems" range-key="value">
				<view class="uni-input">{{levelItems[index].value}}</view>
			</picker>
		</view>
		<view class="sales_double_income" @tap="chooseBeginLocation">
			<view class="sales_double_income-title">开始经纬度:</view>
			<block v-if="hasBeginLocation === false">
				<input class="sales_double_income-input" placeholder="请输入开始经纬度" />
			</block>
			<block v-if="hasBeginLocation === true">
				<view class="sales_double_income-radio">
					{{beginLocation.longitude[0]}}°{{beginLocation.longitude[1]}}′,{{beginLocation.latitude[0]}}°{{beginLocation.latitude[1]}}′
				</view>
			</block>
			<!-- <view class="sales_double_income-unit">%</view> -->
		</view>
		<view class="sales_double_income" @tap="chooseEndLocation">
			<view class="sales_double_income-title">结束经纬度:</view>
			<block v-if="hasEndLocation === false">
				<input class="sales_double_income-input" placeholder="请输入结束经纬度" />
			</block>
			<block v-if="hasEndLocation === true">
				<view class="sales_double_income-radio">
					{{endLocation.longitude[0]}}°{{endLocation.longitude[1]}}′,{{endLocation.latitude[0]}}°{{endLocation.latitude[1]}}′
				</view>
			</block>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">描述:</view>
			<view class="uni-textarea">
				<textarea auto-height />
				</view>		
		</view>
		<!-- 保存 -->
		<view class="save_btn">
		  <view class="save_btn-inner" @click="handleSave">保存设置</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/common/util.js');
	var formatLocation = util.formatLocation;
	export default {
		// 工具
		// name: "河道创建",
		data() {
			return {
				title: 'label',
				index: 0,
				radioItems: [{
						name: 'USA',
						value: '河流'
					},
					{
						name: 'CHN',
						value: '湖泊',
						checked: 'true'
					}
				],
				levelItems:[
					{
							name: 'USA',
							value: '省级河道'
						},
						{
							name: 'CHN',
							value: '市级河道',
							checked: 'true'
						},{
							name: 'CHN',
							value: '县级河道',
							checked: 'true'
						}
				],
				hasEndLocation: false,
				hasBeginLocation :false,
				beginLocation: {},
				endLocation: {}
			}
		},
		methods: {
			handleJump(type) {
				uni.navigateTo({
					url: "../tabbar-4/cpn/create-river"
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value
			},
			handleSave(){
				uni.showToast({
					title: '保存成功'
				});
			},
			chooseBeginLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.hasBeginLocation = true,
							this.beginLocation = formatLocation(res.longitude, res.latitude)
					}
				})
			},
			chooseEndLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.hasEndLocation = true,
							this.endLocation = formatLocation(res.longitude, res.latitude)
					}
				})
			}
		}
	};
</script>

<style >
	page {
		background: #F4F5F6;
		padding-bottom: 152upx;
	}
</style>
	
<style lang="scss" scoped>

	.uni-form-item {
		display: flex;
		width: 100%;
		padding: 10upx 0;
	}

	.uni-form-item .title {
		font-size: 32upx;
		padding: 10upx 25upx;
	}
	.uni-textarea{
		width:81%;
		background:#FFF;
	}
	.uni-textarea textarea{
		width:96%;
		padding:18upx 11%;
		line-height:1.6;
		font-size:28upx;
		height:150upx;
	}
	
	// 收入比例
	.sales_double {
	  background: #f5f5f5;
	  &_income {
	    @include flexLine;
	    @extend .model;
	    padding: 6upx 38upx;
	    &-title {
			font-size: 30upx;
	      font-weight: bold;
	    }
	    &-info {
	      box-sizing: content-box;
	      padding: 28upx;
	      width: 28upx;
	      height: 28upx;
	    }
	    &-input {
	      flex: 1;
	      height: 80upx;
	      text-align: right;
	      margin-right: 16upx;
	      font-size: 30upx;
	      // font-weight: bold;
	    }
	    &-unit {
	      font-size: 30upx;
	    }
		&-radio{
			flex: 1;
			height: 80upx;
			text-align: right;
			font-size: 30upx;
			margin-top: 34upx;
			&-name{
				width: 100upx;
			}
		}
	  }
	}
	// 模式
	.model {
	  overflow: hidden;
	  margin: 24upx;
	  border-radius: 16upx;
	  background: #fff;
	
	  &_switch {
	    position: relative;
	    padding: 30upx 38upx;
	    border-bottom: 1upx solid rgba(0, 0, 0, 0.06);
	
	    &-title {
	      font-size: 30upx;
	      font-weight: bold;
	      color: rgba(51, 51, 51, 1);
	    }
	    &-desc {
	      margin-top: 14upx;
	      font-size: 24upx;
	      color: rgba(153, 153, 153, 1);
	    }
	    &-info {
	      position: absolute;
	      top: 2upx;
	      left: 160upx;
	      box-sizing: content-box;
	      padding: 28upx;
	      width: 28upx;
	      height: 28upx;
	    }
	    switch {
	      position: absolute;
	      top: 14upx;
	      right: 10upx;
	      transform: scale(0.8);
	    }
	  }
	}
	// 保存
	.save_btn {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #fff;
	  &-inner {
	    margin: 24upx;
	    @include blueBtn;
	  }
	}
</style>
